<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>供应商管理</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <style>
        .header-actions {
            margin-bottom: 20px;
        }
        .search-bar {
            max-width: 300px;
            margin-right: 10px;
        }
        .checkbox-container {
            margin-bottom: 15px;
        }
        .table th, .table td {
            vertical-align: middle;
        }
        .completed {
            color: #28a745;
        }
        .supplier-row {
            cursor: pointer;
        }
        .supplier-row.selected {
            background-color: #e2f0ff;
        }
        .projects-section {
            display: none;
        }
    </style>
</head>
<body>
    <div class="container-fluid mt-4">
        <div class="row header-actions">
            <div class="col-md-6">
                <div class="input-group search-bar">
                    <input type="text" class="form-control" placeholder="项目名称/供应商/联系人">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="button">
                            <i class="fa fa-search"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="col-md-6 text-right">
                <button class="btn btn-primary" id="newSupplierBtn">新建</button>
                <button class="btn btn-outline-secondary">导出</button>
                <button class="btn btn-outline-secondary">打印</button>
                <button class="btn btn-outline-secondary" id="inviteBtn">邀请</button>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <table class="table table-bordered table-hover">
                    <thead class="thead-light">
                        <tr>
                            <th width="5%"><input type="checkbox" id="selectAll"></th>
                            <th width="10%">登录账号</th>
                            <th width="10%">供应商</th>
                            <th width="10%">联系人</th>
                            <th width="10%">联系方式</th>
                            <th width="15%">电子邮件</th>
                            <th width="10%">创建人</th>
                            <th width="10%">创建日期</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="supplier-row" data-id="1">
                            <td><input type="checkbox" class="row-checkbox"></td>
                            <td>xxxx</td>
                            <td>xxxxx</td>
                            <td>xxxxx</td>
                            <td>x</td>
                            <td></td>
                            <td>王五</td>
                            <td>2022-01-14</td>
                        </tr>
                        <tr class="supplier-row" data-id="2">
                            <td><input type="checkbox" class="row-checkbox"></td>
                            <td>xxxx</td>
                            <td>xxxxx</td>
                            <td>xxxxx</td>
                            <td>x</td>
                            <td></td>
                            <td>张三</td>
                            <td>2022-01-14</td>
                        </tr>
                        <tr class="supplier-row" data-id="3">
                            <td><input type="checkbox" class="row-checkbox"></td>
                            <td>xxxx</td>
                            <td>xxxxx</td>
                            <td>xxxxx</td>
                            <td>x</td>
                            <td></td>
                            <td>李四</td>
                            <td>2020-09-21</td>
                        </tr>
                        <tr class="supplier-row" data-id="4">
                            <td><input type="checkbox" class="row-checkbox"></td>
                            <td>xxxx</td>
                            <td>xxxxx</td>
                            <td>xxxxx</td>
                            <td>x</td>
                            <td></td>
                            <td>王五</td>
                            <td>2020-09-21</td>
                        </tr>
                        <tr class="supplier-row" data-id="5">
                            <td><input type="checkbox" class="row-checkbox"></td>
                            <td>xxxx</td>
                            <td>xxxxx</td>
                            <td>xxxxx</td>
                            <td>x</td>
                            <td></td>
                            <td>张三</td>
                            <td>2022-01-14</td>
                        </tr>
                        <tr class="supplier-row" data-id="6">
                            <td><input type="checkbox" class="row-checkbox"></td>
                            <td>xxxx</td>
                            <td>xxxxx</td>
                            <td>xxxxx</td>
                            <td>x</td>
                            <td></td>
                            <td>李四</td>
                            <td>2024-02-26</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <nav aria-label="Page navigation">
                    <ul class="pagination justify-content-center">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                        </li>
                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>

        <div class="row mt-4 projects-section" id="supplierProjects">
            <div class="col-12">
                <h5 class="mb-3">
                    <span id="selectedSupplierInfo">显示该供应商参与的项目明细</span>
                </h5>
                <table class="table table-bordered table-hover">
                    <thead class="thead-light">
                        <tr>
                            <th width="5%">NO.</th>
                            <th width="20%">项目名称</th>
                            <th width="15%">项目编号</th>
                            <th width="15%">建设单位</th>
                            <th width="15%">所属部门</th>
                            <th width="15%">项目负责人</th>
                            <th width="10%">申报日期</th>
                            <th width="5%">状态</th>
                        </tr>
                    </thead>
                    <tbody id="projectsTableBody">
                        <tr>
                            <td>1</td>
                            <td>显示该供应商参与的项目明细</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>2022-01-14</td>
                            <td><span class="completed">已审核</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            // 点击新建按钮时跳转到新建页面
            $("#newSupplierBtn").click(function() {
                window.location.href = "new/supplier.html";
            });
            
            // 邀请按钮点击事件
            $("#inviteBtn").click(function() {
                // 生成唯一邀请码
                const inviteCode = generateInviteCode();
                // 构建邀请链接
                const inviteLink = `${window.location.origin}${window.location.pathname.substring(0, window.location.pathname.lastIndexOf("/"))}/new/supplier-register.html?code=${inviteCode}`;
                
                // 显示生成的链接
                showInviteLink(inviteLink);
            });
            
            // 生成随机邀请码
            function generateInviteCode() {
                return Math.random().toString(36).substring(2, 10) + Date.now().toString(36);
            }
            
            // 显示邀请链接
            function showInviteLink(link) {
                // 创建模态框
                if ($("#inviteLinkModal").length === 0) {
                    const modalHtml = `
                        <div class="modal fade" id="inviteLinkModal" tabindex="-1" role="dialog" aria-labelledby="inviteLinkModalLabel" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="inviteLinkModalLabel">邀请链接</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <p>请将以下链接发送给供应商进行注册：</p>
                                        <div class="input-group mb-3">
                                            <input type="text" class="form-control" id="inviteLink" readonly>
                                            <div class="input-group-append">
                                                <button class="btn btn-outline-secondary" type="button" id="copyLink">复制</button>
                                            </div>
                                        </div>
                                        <small class="text-muted">链接有效期为7天，请及时发送。</small>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                    $('body').append(modalHtml);
                    
                    // 复制链接按钮点击事件
                    $(document).on('click', '#copyLink', function() {
                        const linkInput = document.getElementById('inviteLink');
                        linkInput.select();
                        document.execCommand('copy');
                        $(this).text('已复制');
                        setTimeout(() => {
                            $(this).text('复制');
                        }, 2000);
                    });
                }
                
                // 设置链接并显示模态框
                $('#inviteLink').val(link);
                $('#inviteLinkModal').modal('show');
            }
            
            // 全选/取消全选
            $("#selectAll").change(function() {
                $(".row-checkbox").prop("checked", $(this).prop("checked"));
            });
            
            // 点击行时显示该供应商的项目
            $(".supplier-row").click(function(e) {
                // 如果点击的是复选框，不触发行选中
                if ($(e.target).is(':checkbox') || $(e.target).is('td:first-child')) {
                    return;
                }
                
                // 移除其他行的选中状态
                $(".supplier-row").removeClass("selected");
                
                // 添加当前行选中状态
                $(this).addClass("selected");
                
                // 显示项目区域
                $("#supplierProjects").show();
                
                // 获取供应商ID
                var supplierId = $(this).data("id");
                
                // 根据供应商ID加载对应的项目
                loadSupplierProjects(supplierId);
            });
            
            // 加载供应商的项目
            function loadSupplierProjects(supplierId) {
                // 清空项目表格
                $("#projectsTableBody").empty();
                
                // 模拟数据 - 实际应用中应从服务器获取
                var projectsData = {
                    1: [
                        {
                            id: 1,
                            name: "信息系统安全升级项目",
                            number: "PJ202201001",
                            unit: "信息技术部",
                            department: "IT部门",
                            manager: "张三",
                            date: "2022-01-14",
                            status: "已审核"
                        },
                        {
                            id: 2,
                            name: "云平台迁移项目",
                            number: "PJ202201002",
                            unit: "信息技术部",
                            department: "IT部门",
                            manager: "李四",
                            date: "2022-01-15",
                            status: "未审核"
                        }
                    ],
                    2: [
                        {
                            id: 1,
                            name: "教学资源平台项目",
                            number: "PJ202201003",
                            unit: "教务处",
                            department: "教育部门",
                            manager: "王五",
                            date: "2022-01-16",
                            status: "已审核"
                        }
                    ],
                    3: [
                        {
                            id: 1,
                            name: "医疗设备采购项目",
                            number: "PJ202201004",
                            unit: "医疗设备科",
                            department: "医疗部门",
                            manager: "赵六",
                            date: "2022-01-17",
                            status: "已审核"
                        }
                    ]
                };
                
                // 获取对应供应商的项目
                var projects = projectsData[supplierId] || [];
                
                // 渲染项目数据
                $.each(projects, function(index, project) {
                    var statusClass = project.status === "已审核" ? "completed" : "";
                    var row = `
                        <tr>
                            <td>${index + 1}</td>
                            <td>${project.name}</td>
                            <td>${project.number}</td>
                            <td>${project.unit}</td>
                            <td>${project.department}</td>
                            <td>${project.manager}</td>
                            <td>${project.date}</td>
                            <td><span class="${statusClass}">${project.status}</span></td>
                        </tr>
                    `;
                    $("#projectsTableBody").append(row);
                });
                
                // 如果没有项目，显示默认行
                if (projects.length === 0) {
                    var row = `
                        <tr>
                            <td>1</td>
                            <td>显示该供应商参与的项目明细</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>2022-01-14</td>
                            <td><span class="completed">已审核</span></td>
                        </tr>
                    `;
                    $("#projectsTableBody").append(row);
                }
            }
        });
    </script>
</body>
</html>
